<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Surf Company</title>

<link rel="stylesheet" type="text/css" href="style.css" />
<script src="images/jquery.tools.min.js" type="text/javascript"></script>

</head>

<body>

<div id="wrapper">
	<div id="content">
    
    	<div id="header">
        	<h1><a href="#">SURF COMPANY</a></h1>            
        </div><!-- header -->
        
        <div id="menu">
        	<ul>	
            	<li class="selected"><a href="#">Surf</a> /</li>
                <li><a href="#">Skate</a> /</li>
                <li><a href="#">Apparel</a> /</li>
                <li><a href="#">Sun</a> /</li>
                <li><a href="#">Contact</a></li>
            </ul>
        </div><!--menu-->
        
       <div id="container">
       
        <div id="sidebar">
        
        	<h4>/Featured Products</h4>
        	
            
            <img src="images/majica.png" alt="tshirt" border="0" class="ttshirt"/>
            <h3><a href="#">Nulla dapibus urna</a></h3>
            <p>Morbi dignissim. Etiam sed 
                enim in tellus aliquet sollicitudin. 
                molestie. Class aptent taciti 
                sociosqu ad litora torquent per 
                conubia nostra, per inceptos.</p>               
            
            <h3><a href="#" class="str">View product</a></h3>
			
            <img src="images/linija.png" border="0" alt="" />
            
            <img src="images/hat.png" alt="hat" border="0" class="ttshirt"/>
            <h3><a href="#">Nulla dapibus urna</a></h3>
            <p>Morbi dignissim. Etiam sed 
                nissim. Etiam sednissim. Etiam sed
                conubia nostra, per inceptos.</p>
   
            <h3><a href="#" class="str">View product</a></h3>
        </div><!--sidebar-->
        
        <div id="main">
        	<h2>/Sun<span class="blue">surf</span></h2>
            
            <blockquote>Duis sit amet risus quis mauris accumsan tincidunt. Phasellus 
                        id magna. Nulla dapibus urna eget purus. Pellentesque 
                        porttitor molestie felis.  
            </blockquote>
             
             <img src="images/velikalinija.png" alt="" border="0" class="line"/>
                        
            <p>Proin diam lectus, elementum nec, iaculis non, eleifend a, risus. Curabitur varius auctor metus. 
                Vestibulum cursus mattis tortor. Nullam auctor turpis ut ante. Duis sapien tellus, vehicula vitae, 
                ultrices sit amet, iaculis a, neque. Aenean vestibulum mattis ligula. Nullam blandit imperdiet. </p>
                
               <p> Morbi dignissim. Etiam sed enim in tellus aliquet sollicitudin. Phasellus at augue. Vivamus in lacus 
                nec nisi eleifend molestie. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per 
                inceptos himenaeos. Etiam accumsan. Pellentesque laoreet lacus a massa. Aliquam mi. 
                Suspendisse consequat scelerisque arcu.</p>
                
               <p> Vestibulum cursus mattis tortor. Nullam auctor turpis ut ante. Duis sapien tellus, vehicula vitae, 
                ultrices sit amet, iaculis a, neque. Aenean vestibulum mattis ligula. Nullam blandit imperdiet 
            </p>
            
        	<div style="clear:both;"></div>
        </div><!--main-->
        
     
        
        	<div style="clear:both;"></div>
       </div><!--container-->
       
        <div id="slider">
        
        	<!-- "previous page" action -->
            <a class="prevPage browse left"></a>
            
            <!-- root element for scrollable -->
            <div class="scrollable" id="infinite">	
                
                <!-- root element for the items -->
                <div class="items">
                
                	<!-- 1-5 -->
                    <img src="http://farm1.static.flickr.com/143/321464099_a7cfcb95cf_t.jpg" alt="" border="0"/>
                    <img src="http://farm4.static.flickr.com/3089/2796719087_c3ee89a730_t.jpg" alt="" border="0"/>
                    <img src="http://farm1.static.flickr.com/79/244441862_08ec9b6b49_t.jpg" alt="" border="0"/>
            
                    <img src="http://farm1.static.flickr.com/28/66523124_b468cf4978_t.jpg" alt="" border="0"/>
                    <img src="http://farm1.static.flickr.com/164/399223606_b875ddf797_t.jpg" alt="" border="0"/>
                    
                    <!-- 5-10 -->
                    <img src="http://farm1.static.flickr.com/163/399223609_db47d35b7c_t.jpg" alt="" border="0"/>
                    <img src="http://farm1.static.flickr.com/135/321464104_c010dbf34c_t.jpg" alt="" border="0"/>
                    <img src="http://farm1.static.flickr.com/40/117346184_9760f3aabc_t.jpg" alt="" border="0"/>
                    <img src="http://farm1.static.flickr.com/153/399232237_6928a527c1_t.jpg" alt="" border="0"/>
                    <img src="http://farm1.static.flickr.com/50/117346182_1fded507fa_t.jpg" alt="" border="0"/>
                    
                    <!-- 10-15 -->
            
                    <img src="http://farm4.static.flickr.com/3629/3323896446_3b87a8bf75_t.jpg" alt="" border="0"/>
                    <img src="http://farm4.static.flickr.com/3023/3323897466_e61624f6de_t.jpg" alt="" border="0"/>
                    <img src="http://farm4.static.flickr.com/3650/3323058611_d35c894fab_t.jpg" alt="" border="0" />
                    <img src="http://farm4.static.flickr.com/3635/3323893254_3183671257_t.jpg" alt="" border="0"/>
                    <img src="http://farm4.static.flickr.com/3624/3323893148_8318838fbd_t.jpg" alt="" border="0"/>

                   
                </div>
                
            </div>
            
        <!-- "next page" action -->
            <a class="nextPage browse right"></a>

        
        	<img src="images/baner.jpg" alt="" border="0" />
        
        </div><!-- slier -->
        
        <div id="footer">
        	<span>&copy;2010 Surf Company</span>
            
            <ul>
            	<li><a href="#">Home</a> |</li>
                <li><a href="#">Site Map</a> |</li>
                <li><a href="#">Accessibility</a> |</li>
                <li><a href="#">Contact</a> |</li>
                <li><a href="http://vectorart.org">Design by Vector</a></li> 
            </ul>
        
        </div><!--footer-->
       
	 </div><!-- content -->

	</div><!-- wrapper -->

<script type="text/javascript">
$(document).ready(function() {
	$("#infinite").scrollable().circular();	
});
</script>


 </body>
</html>
